﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Business Card</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <style type="text/css">
    	body, html { margin: 0; height: 100%; width: 100%; }
    	.businessCard { border: 3px inset gray; margin: 1em; } 
    	.employeeName { color: blue; } 
    	.specialEmployeeName { color: red; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script type="text/javascript">
        require(["dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin", "dojo/dom-construct"], function(declare, _Widget, _TemplatedMixin, domConstruct) {
        	declare("BusinessCard", [_Widget, _TemplatedMixin], {
            	// 初始化参数
            	name: "unknown",
            	nameClass: "employeeName",
            	phone: "unknown",

            	templateString: "<div class='businessCard'>" + "<div>姓名: <span data-dojo-attach-point='nameNode'></span></div>" + "<div>电话 #: <span data-dojo-attach-point= 'phoneNode'></span></div>" + "</div>",
			
			attributeMap: {
				name: {
					node: "nameNode",
					type: "innerHTML"
				},
				nameClass: {
					node: "nameNode",
					type: "class"
				},
				phone: {
					node: "phoneNode",
					type: "innerHTML"
				}
			}
       	 });
        });

        require(["dojo/parser", "dojo/domReady!"], function(parser){
        	parser.parse();
        });
    </script>
</head>
<body class="tundra">
    <span data-dojo-type="BusinessCard" data-dojo-props="name: '陈德选', phone: '(010) 63981212'">
    </span>
    <span data-dojo-type="BusinessCard" data-dojo-props="name: '刘泊芸', nameClass: 'specialEmployeeName', phone: '(010) 63967113'">
    </span>
</body>
</html>

